import { View } from '@tarojs/components'
import React, { useEffect, useState } from 'react'
import { AtAvatar, AtButton, AtDivider } from 'taro-ui'
import Taro from '@tarojs/taro'
import Router from 'tarojs-router-next'
import env from '../../../store/env.config'

import './index.scss'

interface MyOrderListProps {
  status: number
  setTotal: React.Dispatch<number[]>
  total: number[]
  refresh: number
  userInfo: any
  setRefresh: React.Dispatch<React.SetStateAction<number>>
}

const MyOrderList: React.FC<MyOrderListProps> = ({
  total,
  status = -1,
  setTotal,
  refresh,
  userInfo,
}) => {
  const [userOrderList, setOrderList] = useState([] as any)

  const getShoppingData = () => {
    setOrderList([])
    if (userInfo.id !== undefined && userInfo.id > 0) {
      let url = `${env.domain}/order/list?userId=${userInfo.id}`
      if (status > -1) {
        url = `${env.domain}/order/list?userId=${userInfo.id}&isDel=${status}`
      }
      Taro.request({
        url: url,
        data: {
          page: 1,
          pageSize: 10000,
          token: userInfo['auth'],
        },
        success: (res) => {
          setOrderList(res.data.data.recode)

          let tmp = total

          switch (status) {
            case 0:
              tmp[1] = res.data.data.recode.length
              break
            case 1:
              tmp[2] = res.data.data.recode.length
              break
            case -1:
              tmp[3] = res.data.data.recode.length
              break
          }
          setTotal([...tmp])
        },
      })
    }
  }

  useEffect(() => {
    getShoppingData()
  }, [userInfo, status, refresh])

  const refund = (item) => {
    console.log('退款', item)
    Taro.showModal({
      title: '提示',
      content: '该功能尚未开启，敬请期待！',
    })
  }

  const submitEnv = (item) => {
    console.log('评价', item)
    Taro.request({
      url: `${env.domain}/order/update?token=${userInfo['auth']}`,
      data: {
        id: item.id,
        isDel: -1,
      },
      method: 'PUT',
    })
    Router.navigate(
      { url: '/pages/detail/detail' },
      { data: { ...item.goods, current: 1 } }
    )
  }

  const receiveGoods = (item) => {
    console.log('item', item)

    Taro.showModal({
      title: '确认收货？',
      content: '请再次确认，否则点击取消即可！',
      success: function (res) {
        if (res.confirm) {
          Taro.request({
            url: `${env.domain}/order/update?token=${userInfo['auth']}`,
            data: {
              id: item.id,
              isDel: 1,
            },
            method: 'PUT',
            success: (res) => {
              getShoppingData()
              Taro.showToast({
                title: '确认收货成功',
                icon: 'success',
                duration: 2000,
              })
            },
            fail: () => {
              Taro.showToast({
                title: '确认收货失败',
                icon: 'error',
                duration: 2000,
              })
            },
          })
        } else if (res.cancel) {
          Taro.showToast({
            title: '您已取消确认！',
            icon: 'error',
            duration: 2000,
          })
        }
      },
    })
  }

  return (
    <View>
      {userOrderList.map((item, index) => {
        return (
          <View key={index}>
            <View className='at-row'>
              <View className='at-col at-col-12'>
                《{item.goods.name}》x{item.goodsNum}
              </View>
            </View>

            <View className='at-row at-article'>
              <View className='at-col at-col-4'>
                <AtAvatar
                  className='goods-image'
                  image={item.goods.cover}
                ></AtAvatar>
              </View>
              <View className='at-col at-col-8'>
                <View className='text-p'>{item.goods.remark}</View>
                <View className='at-row' style={{ marginRight: '8px' }}>
                  <AtButton type='secondary' size='small'>
                    价格:{item.price}
                  </AtButton>
                  <View className='at-col at-col-6'>
                    <AtButton
                      size='small'
                      type='primary'
                      onClick={() => {
                        switch (status) {
                          case 0:
                            receiveGoods(item)
                            break
                          case 1:
                            submitEnv(item)
                            break
                          case -1:
                            refund(item)
                            break
                        }
                      }}
                    >
                      {status !== 0
                        ? status !== 1
                          ? '退款/售后'
                          : '去评价'
                        : '确认收货'}
                    </AtButton>
                  </View>
                </View>
              </View>
            </View>
            <AtDivider
              content={index === userOrderList.length - 1 ? '没有更多了' : ''}
              fontColor='#ed3f14'
              lineColor='#ed3f14'
            />
          </View>
        )
      })}
    </View>
  )
}

export default MyOrderList
